<template>
	<!-- 我的 -->
	<view class="bigbox pb50">
		<!-- 头部盒子 -->
		<view class="headerbox pl54 pt80">
			<view class="flex" @tap="$jump('/pages/my/setup/Edit-data/Edit-data')">
				<image :src="userInfo.avatar" class="w114 h114 avatar mr40"></image>
				<!-- <image src="~@/static/img/my/my_avatar.png" class="w190 h190 avatar bor-rad50" v-else></image> -->
				<!-- 右侧盒子 -->
				<view class="flex row-column row-around">
					<!-- 右上的盒子 -->
					<view class="flex col-center">
						<text class="mr20 username">{{userInfo.username}}</text>
						<!-- <text class="mr20 username" v-else>{{userInfo.mobile}}</text> -->
						<view class="flex1 flex flex-wrap">
							<block v-for="(item,i) in level_array" :key='i'>
								<view class="VIPbox w142 h38 pl30 text-center mt10 mr10" v-if="userInfo.status == 'normal'">{{item}}</view>
							</block>
						</view>
					</view>
					<text class="usertxt">{{userInfo.bio}}</text>
					<view class="usertxt mt20" >
						邀请码:<text @click.stop="copy">{{userInfo.invitation_code}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- /头部盒子 -->
		
		<!-- 中间盒子 -->
		<view class="h186 box-center mt70 flex boxr">
			<!-- 左边的盒子 -->
			<view class="box-center-l flex1 flex row-column col-center row-center" @tap="$jump('/pages/my/myCollection/myCollection')">
				<view class="box-center-l-num">
					{{userInfo.collection}}
				</view>
				<view class="mt34 box-center-l-t">
					我的收藏
				</view>
			</view>
			<!-- 右边的盒子 -->
			<view class="box-center-l flex1 flex row-column col-center row-center" @tap="$jump('/pages/my/myApply/myApply')">
				<view class="box-center-l-num">
					{{userInfo.myApply}}
				</view>
				<view class="mt34 box-center-l-t">
					我的申请
				</view>
			</view>
		</view>
		<!-- /中间盒子 -->
		
		<!-- banner盒子 -->
		<view class="bannerbox pt46 pb46 mt26 boxr">
			<view class="bannertit ml44">
				常用功能
			</view>
			<view class="flex mt56 row-around" >
				<view class="text-center" @tap="$jump('/pages/my/myWallet/myWallet')">
					<image src="/static/img/my/1my-1.png" mode="widthFix" class="w97 h97"></image>
					<view>钱包</view>
				</view>
				<view class="text-center" @tap="$jump('/pages/my/VIP/VIP')">
					<image src="/static/img/my/1my-2.png" mode="widthFix" class="w97 h97"></image>
					<view>会员</view>
				</view>
				<view class="text-center" @tap="$jump('/pages/my/resume/resume')">
					<image src="/static/img/my/1my-3.png" mode="widthFix" class="w97 h97"></image>
					<view>简历</view>
				</view>
			</view>
		</view>
		<!-- /banner盒子 -->
		
		<!-- 底部的盒子 -->
		<view class="bannerbox pt46 pb46 mt26 boxr">
			<view class="bannertit ml44">
				常用功能
			</view>
			<view class="flex  flex-wrap">
				<view class="footerbox-item" @tap="$jump('/pages/my/setup/setup')">
					<image src="/static/img/my/1my-4.png" class="w97 h97" ></image>
					<view>设置</view>
				</view>
				<view class="footerbox-item" @tap="$jump('/pages/my/customerService/customerService')">
					<image src="/static/img/my/1my-5.png" class="w97 h97"></image>
					<view>客服</view>
				</view>
				<view class="footerbox-item" @tap="$jump('/pages/my/about/about')">
					<image src="/static/img/my/1my-6.png" class="w97 h97"></image>
					<view>关于</view>
				</view>
				<view class="footerbox-item" @tap="$jump('/pages/my/myTeam/myTeam')">
					<image src="/static/img/my/7.png" class="w97 h97"></image>
					<view>我的团队</view>
				</view>
				<view class="footerbox-item" @tap="$jump('/pages/my/myWallet/bankCard/bankCard')">
					<image src="/static/img/my/8.png" class="w97 h97"></image>
					<view>银行卡</view>
				</view>
				<view class="footerbox-item" @tap="$jump('/pages/my/myWallet/IDcard/IDcard')">
					<image src="/static/img/my/9.png" class="w97 h97"></image>
					<view>身份证</view>
				</view>
			</view>
		</view>
		<!-- /底部的盒子 -->
	</view>
</template>

<script>
	export default {
		name:'my',
		data() {
			return {
				userInfo:'',
				level_array:[],
			};
		},
		onShow() {
			this.$user()
			this.$config()
			this.getUserInformation()
			// this.userInfo = uni.getStorageSync('userInfo')
			// console.log(this.userInfo)
		},
		methods:{
			async getUserInformation() {
				const res = await this.$api.GetUserInformation()
				console.log(res)
				this.userInfo=res.data
				this.level_array=res.data.level_array
				uni.setStorageSync('userInfo',res.data)
			},
			copy() {
				this.$tool.copy(this.userInfo.invitation_code)
			}
		}
	}
</script>

<style lang="scss">
page {
	background: url('~@/static/img/my/my_bg.png') no-repeat;
	background-size:100% auto;
}
.headerbox {
	.avatar {
		border-radius: 50%;
	}
	.username {
		font-size: 34rpx;
		color: #0C162E;
	}
	.VIPbox {
		background: url('~@/static/img/my/1my-vip.png') no-repeat;
		background-size: 100% 100%;
		font-size: 18rpx;
		font-weight: 500;
		color: #FFFFFF;
		// text-align: end;
		line-height: 38rpx;
	}
	.usertxt{
		font-size: 22rpx; 
		font-weight: 500;
		color: #1D2538;
	}
}
.box-center {
	background-color: #FFFFFF;
	.box-center-l {
		.box-center-l-num {
			font-size: 66rpx;
			font-family: DIN;
			color: #021E4D;
		}
		.box-center-l-t {
			font-size: 26rpx;
			font-weight: 500;
			color: #1385FF;
		}
	}
}
.bannerbox {
	background-color: #FFFFFF;
}
.footerbox-item {
	width:33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50rpx;
	view {
		margin-top: 20rpx;
	}
}
</style>
